<div class="button-container">
  <p class="pick-info">Pick a demo to load:</p>
  <button (click)="onShow(0)" [class.active]="show===0">Simple</button>
  <button (click)="onShow(1)" [class.active]="show===1">ngFor case</button>
  <button (click)="onShow(2)" [class.active]="show===2">ngFor custom command</button>
  <button (click)="onShow(3)" [class.active]="show===3">Component HTML template</button>
  <button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
  <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
  <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
  <button (click)="onShow(7)" [class.active]="show===7">Two Grids + sidebar</button>
  <button (click)="onShow(8)" [class.active]="show===8">Lazy Load</button>
  <button (click)="onShow(9)" [class.active]="show===9">Leak Test</button>
</div>

<div class="test-container">
  <angular-simple-test *ngIf="show===0"></angular-simple-test>
  <angular-ng-for-test *ngIf="show===1"></angular-ng-for-test>
  <angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>

  <div *ngIf="show===3">
    <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
    <button (click)="add()">add item</button>
    <button (click)="delete()">remove item</button>
    <button (click)="modify()">modify item</button>
    <button (click)="newLayout()">new layout</button>
    <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
      <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
      <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
    </gridstack>
  </div>

  <div *ngIf="show===4">
    <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
    <button (click)="addNgFor()">add item</button>
    <button (click)="deleteNgFor()">remove item</button>
    <button (click)="modifyNgFor()">modify item</button>
    <button (click)="newLayoutNgFor()">new layout</button>
    <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
      <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"></gridstack-item>
    </gridstack>
  </div>

  <div *ngIf="show===5">
    <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
    <button (click)="add()">add item</button>
    <button (click)="delete()">remove item</button>
    <button (click)="modify()">modify item</button>
    <button (click)="newLayout()">new layout</button>
    <button (click)="saveGrid()">Save</button>
    <button (click)="clearGrid()">Clear</button>
    <button (click)="loadGrid()">Load</button>
    <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    </gridstack>
  </div>

  <div *ngIf="show===6">
    <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
    <button (click)="add()">add item</button>
    <button (click)="delete()">remove item</button>
    <button (click)="modify()">modify item</button>
    <button (click)="newLayout()">new layout</button>
    <button (click)="saveGrid()">Save</button>
    <button (click)="clearGrid()">Clear</button>
    <button (click)="loadGrid()">Load</button>
    <!-- add .grid-stack-item for acceptWidgets:true -->
    <div class="sidebar-item grid-stack-item">Drag nested</div>
    <div class="sidebar-item grid-stack-item">Comp N nested</div>

    <!-- TODO: addGrid() in code for testing instead ? -->
    <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
      <div empty-content>Add items here or reload the grid</div>
    </gridstack>
  </div>

  <div *ngIf="show===7">
    <p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
    <div class="row">
      <div class="col-md-6">
        <div class="sidebar">
          <div class="sidebar-item grid-stack-item">will be A</div>
          <div class="sidebar-item grid-stack-item">will be B max=3</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="trash" id="trash">
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 20px">
      <div class="col-md-6">
        <gridstack [options]="twoGridOpt1"></gridstack>
      </div>
      <div class="col-md-6">
        <gridstack [options]="twoGridOpt2"></gridstack>
      </div>
    </div>
  </div>

  <div *ngIf="show===8">
    <p>open console and scroll to see delay loading of components</p>
    <div style="height: 120px; overflow-y: auto">
      <gridstack [options]="gridOptionsDelay"></gridstack>
    </div>
  </div>

  <div *ngIf="show===9">
    <p>load() + clear() to memory leak test between the two</p>
    <button (click)="clearGrid()">Clear</button>
    <button (click)="load(sub0)">load</button>
    <button (click)="load(sub2)">load 2</button>
    <gridstack [options]="gridOptions"></gridstack>
    <div class="grid-container"></div>

  </div>

  <div *ngIf="show<8" class="text-container">
    <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
    <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
  </div>

</div>
